<template>
  <div class="other-login" v-if="oauthConfig?.is_oauth">
    <span class="other-login-title">其他登录方式</span>
    <div class="social-login">

      <a
          v-for="p in filteredProviders"
          :key="p.id"
          @click="loginWith(p.id)"
          role="button"
          :title="`使用${p.name}登录`"
          :disabled="loading || isLoggedIn"
          :class="{ disabled: loading || isLoggedIn }"
      >
        <i :class="p.icon"></i>
        <span v-if="loading === p.id" class="loading"></span>
      </a>
    </div>
  </div>
</template>

<script setup>
import {useUserStore} from '@/stores/userStore';
const router = useRouter();
const store = useUserStore();
const isLoggedIn = computed(() => store.isLoggedIn);
const filteredProviders = computed(() => providers.filter(p => p.is_enable));

// 初始化 providers 数组
const providers = [
  {id: 'qq', name: 'QQ', icon: 'fa fa-qq fa-2x'},
  {id: 'weibo', name: '微博', icon: 'fa fa-weibo fa-2x'},
  {id: 'github', name: 'GitHub', icon: 'fa fa-github fa-2x'},
  {id: 'gitee', name: 'Gitee', icon: 'layui-icon layui-icon-gitee fa-2x'},
];

// 声明一个加载中的状态
const loading = ref('');

// 声明一个存储接口返回的 OAuth 配置的变量
const oauthConfig = ref(null);

// 获取认证信息
const getIsAuth = async () => {
  try {
    loading.value = true;
    const response = await axios.get('/api/blog/siteinfo/get_auth_info/');
    oauthConfig.value = response.data;
    // 将 is_enable 添加到 providers 数组中
    oauthConfig.value.oauth_list.forEach(oauth => {
      const provider = providers.find(p => p.id === oauth.name);
      if (provider) {
        provider.is_enable = oauth.is_enable;
      }
    });
  } catch (error) {
    console.error('获取认证信息失败:', error);
  } finally {
    loading.value = false;
  }
};

// 在组件加载时调用接口获取 OAuth 配置
onMounted(() => {
  getIsAuth();
});

// 登录功能
const loginWith = (provider) => {
  if (loading.value || isLoggedIn.value) return;
  loading.value = provider;
  router.push(`/auth-redirect/${provider}`);
};
</script>


<style scoped>
@import '@/assets/accounts/css/font-awesome.min.css';

.social-login {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.social-login a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f5f5f5;
  color: #636363;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.social-login a:hover:not(.disabled) {
  background-color: #e0e0e0;
  color: #333;
  transform: translateY(-2px);
}

.social-login a.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.fa-2x {
  font-size: 1.5rem;
}

.loading {
  position: absolute;
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid rgba(174, 238, 238, 0.3);
  border-radius: 50%;
  border-top-color: #AEEEEE;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>
